<template>
	<view class="outer_box">
		<view class="tuUp-box">
			<view class="input-title">
				<view class="">
					输入金额(元)
				</view>
				<view class="">
					会员固定充值金额为每月600元
				</view>
			</view>
			<view class="input-money">
				<view class="">￥</view>
				<input type="text" value="" v-model="num"/>
			</view>
			<view class="tip">
				*充值每满600元，30天内，可享受1次门诊就医陪伴服务
			</view>
			<view class="fast-money-box">
				<view class="">
					选择金额
				</view>
				<view class="fast-money">
					<view @tap="chooseMoney(index,item)" class="" v-for="(item,index) in chooseData" :class="item.value ==num?'activate':''">{{item.name}}</view>

				</view>
			</view>
		<view class="btn-box">
			<view class="btn" @tap='toUpBtn'>
				立即充值
			</view>
		</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:10,
				activate:0,
				chooseData: [{
						name: '10元',
						value: 10
					},
					{
						name: '50元',
						value: 50
					},
					{
						name: '100元',
						value: 100
					},
					{
						name: '200元',
						value: 200
					},
					{
						name: '300元',
						value: 300
					},
					{
						name: '600元',
						value: 600
					},
				
				]

			}
		},
		methods: {
			toUpBtn(){
				let _this = this
				
				uni.showModal({
					title: '支付',
					content: '确认支付？',
					success: function(res) {
						if (res.confirm) {
							console.log("=============" + _this.num)
				
							_this.$api_http.addusermoney({
								money: _this.num,
								payType:'JSAPI',
							}).then((res) => {
								console.log(JSON.stringify(res.data.dataMap))
				
								uni.requestPayment({
									appId:res.data.dataMap.appid,
								    provider: 'wxpay',
								    timeStamp:res.data.dataMap.timeStamp,
								    nonceStr: res.data.dataMap.nonceStr,
								    package: res.data.dataMap.package,
								    signType: 'MD5',
								    paySign: res.data.dataMap.paySign,
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											duration: 500,
											icon: "none"
										});
										uni.navigateBack({
											delta:1,
											animationDuration:1000
										})
										// setTimeout(function() {
										// 	uni.switchTab({
										// 		url: '../user/user'
										// 	})
										// }, 1700);
										
								    },
								    fail: function (err) {
								       uni.showToast({
								       	title: '支付失败',
								       	duration: 500,
								       	icon: "none"
								       });
								    }
								});
				
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: "none"
							})
						}
					}
				});
				// uni.navigateBack(1)
			},
			chooseMoney(index,chooseData){
				// this.activate= index
				this.num = chooseData.value
				
			}

		}
	}
</script>

<style lang="less" scoped>
	.outer_box {
		display: flex;
		flex-direction: column;

		.tuUp-box {
			padding: 30rpx 20rpx;
			.btn-box {
				display: flex;
				justify-content: center;
			
				.btn {
					width: 78%;
					height: 100upx;
					background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
					border-radius: 50upx;
					color: #FEFEFE;
					font-size: 32upx;
					line-height: 100upx;
					text-align: center;
					margin: 100rpx 0;
				}
			
			}
			.fast-money-box {
				.fast-money {
					display: flex;
					flex-wrap: wrap;
					margin-top: 10rpx;
					.activate{
						background-color: #FFBD66;
						color: #fff;
						border: 2rpx solid #FFBD66;
					}
					view{
						width: 28%;
						height: 140rpx;
						background: #FFFFFF;
						border: 2rpx solid #CCCCCC;
						border-radius: 12rpx;
						margin: 16rpx;
						text-align: center;
						line-height: 140rpx;
						color: #666666;
						font-size: 36rpx;
					}
				}
				
				view {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.tip {
				margin: 20rpx auto;
				color: #FF8308;
				font-size: 24rpx;
			}


			.input-money {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #ccc;
				padding: 20rpx 0;

				view:nth-child(1) {
					font-size: 44rpx;
					color: #333333;
					font-weight: bold;
				}

				input {
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #333333;

				}

			}

			.input-title {
				display: flex;
				align-items: center;

				view:nth-child(1) {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}

				view:nth-child(2) {
					color: #999999;
					font-size: 24rpx;
					margin: 0 10rpx;
				}


			}

		}
	}
</style>
